<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>评论信息</title>
    <style>
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
<h1>恭喜你，<span th:text="${username}"></span> 管理员登录成功！</h1>
<a th:href="@{/adminSuccessPage(username=${username}, page=0, size=10)}">用户信息</a>
<a th:href="@{/adminTicketsPage(username=${username}, page=0, size=10)}">购票信息</a>
<a th:href="@{/adminMoviesPage(username=${username}, page=0, size=10)}">电影信息</a>
<a th:href="@{/adminGenersPage(username=${username}, page=0, size=10)}">类别信息</a>
<a th:href="@{/adminDirectorsPage(username=${username}, page=0, size=10)}">导演信息</a>
<a th:href="@{/adminActorsPage(username=${username}, page=0, size=10)}">演员信息</a>
<a th:href="@{/adminReviewsPage(username=${username}, page=0, size=10)}">评论信息</a>
<!-- 搜索框 -->
<form id="searchForm">
    <input type="hidden" th:name="username" th:value="${username}">
    <input type="hidden" th:name="page" th:value="0">
    <input type="hidden" th:name="size" th:value="${pageSize}">
    <label for="searchUid">根据用户ID搜索:</label>
    <input type="number" id="searchUid" name="uid">
    <input type="button" value="搜索" onclick="searchReviews()">
</form>

<!-- 增加评论按钮 -->
<button id="addReviewBtn">增加评论</button>

<!-- 增加评论模态框 -->
<div id="addReviewModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>添加评论</h2>
        <form id="addReviewForm">
            <label for="addUid">用户ID:</label>
            <input type="number" id="addUid" name="uid" required><br>
            <label for="addMmid">电影编号:</label>
            <input type="number" id="addMmid" name="mmid" required><br>
            <label for="addContent">评论内容:</label>
            <input type="text" id="addContent" name="content" required><br>
            <label for="addRating">评分:</label>
            <input type="number" id="addRating" name="rating" required><br>
            <label for="addMarktime">评论时间:</label>
            <input type="text" id="addMarktime" name="markTime" required><br>
            <button type="submit">保存</button>
        </form>
    </div>
</div>

<!-- 修改评论模态框 -->
<div id="editReviewModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>修改评论</h2>
        <form id="editReviewForm">
            <input type="hidden" id="editRid" name="rid">
            <label for="editUid">用户ID:</label>
            <input type="number" id="editUid" name="uid" required><br>
            <label for="editMmid">电影编号:</label>
            <input type="number" id="editMmid" name="mmid" required><br>
            <label for="editContent">评论内容:</label>
            <input type="text" id="editContent" name="content" required><br>
            <label for="editRating">评分:</label>
            <input type="number" id="editRating" name="rating" required><br>
            <label for="editMarktime">评论时间:</label>
            <input type="text" id="editMarktime" name="markTime" required><br>
            <button type="submit">保存</button>
        </form>
    </div>
</div>

<!-- 删除评论模态框 -->
<div id="deleteReviewModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>删除评论</h2>
        <p>确定要删除这条评论吗？</p>
        <input type="hidden" id="deleteRid" name="rid">
        <button type="button" onclick="confirmDeleteReview()">确定</button>
        <button type="button" onclick="cancelDeleteReview()">取消</button>
    </div>
</div>

<h2>评论信息列表</h2>
<table>
    <thead>
    <tr>
        <th>评论ID</th>
        <th>用户ID</th>
        <th>评论内容</th>
        <th>评分</th>
        <th>评论时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="reviewTableBody">
    <tr th:each="review : ${reviews}">
        <td th:text="${review.rid}"></td>
        <td th:text="${review.uid}"></td>
        <td th:text="${review.content}"></td>
        <td th:text="${review.rating}"></td>
        <td th:text="${review.markTime}"></td>
        <td>
            <button th:onclick="'showEditForm(' + ${review.rid} + ')'">修改</button>
            <button th:onclick="'showDeleteForm(' + ${review.rid} + ')'">删除</button>
        </td>
    </tr>
    </tbody>
</table>

<!-- 分页导航栏 -->
<div>
    <!-- 首页 -->
    <a th:href="@{/adminReviewsPage(username=${username}, page=0, size=${pageSize})}">首页</a>

    <!-- 上一页 -->
    <a th:if="${currentPage > 0}" th:href="@{/adminReviewsPage(username=${username}, page=${currentPage - 1}, size=${pageSize})}">上一页</a>

    <!-- 下一页 -->
    <a th:if="${currentPage < totalPages - 1}" th:href="@{/adminReviewsPage(username=${username}, page=${currentPage + 1}, size=${pageSize})}">下一页</a>

    <!-- 末页 -->
    <a th:href="@{/adminReviewsPage(username=${username}, page=${totalPages - 1}, size=${pageSize})}">末页</a>

    <!-- 显示当前页和总页数 -->
    <span>当前页: <span th:text="${currentPage + 1}"></span> / 总页数: <span th:text="${totalPages}"></span></span>
    <form th:action="@{/adminReviewsPage}" method="get">
        <input type="hidden" th:name="username" th:value="${username}">
        <input type="hidden" th:name="size" th:value="${pageSize}">
        <label for="pageNumber">跳转到页数:</label>
        <input type="number" id="pageNumber" name="page" min="0" th:max="${totalPages - 1}" required>
        <input type="submit" value="跳转">
    </form>
</div>
<script>
    // 获取模态框
    var addReviewModal = document.getElementById("addReviewModal");
    var editReviewModal = document.getElementById("editReviewModal");
    var deleteReviewModal = document.getElementById("deleteReviewModal");

    // 获取关闭按钮
    var addReviewClose = document.getElementsByClassName("close")[0];
    var editReviewClose = document.getElementsByClassName("close")[1];
    var deleteReviewClose = document.getElementsByClassName("close")[2];

    // 获取增加评论按钮
    var addReviewBtn = document.getElementById("addReviewBtn");

    // 点击增加评论按钮时显示增加评论模态框
    addReviewBtn.onclick = function() {
        addReviewModal.style.display = "block";
    };

    // 点击关闭按钮时隐藏增加评论模态框
    addReviewClose.onclick = function() {
        addReviewModal.style.display = "none";
    };

    // 点击关闭按钮时隐藏修改评论模态框
    editReviewClose.onclick = function() {
        editReviewModal.style.display = "none";
    };

    // 点击关闭按钮时隐藏删除评论模态框
    deleteReviewClose.onclick = function() {
        deleteReviewModal.style.display = "none";
    };

    // 点击搜索按钮时搜索评论
    function searchReviews() {
        var uid = document.getElementById("searchUid").value;
        fetch(`/review/searchReview?uid=${uid}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    var reviews = data.reviews;
                    var tableBody = document.getElementById("reviewTableBody");
                    tableBody.innerHTML = "";
                    reviews.forEach(review => {
                        var row = document.createElement("tr");
                        row.innerHTML = `
                                <td>${review.rid}</td>
                                <td>${review.uid}</td>
                                <td>${review.content}</td>
                                <td>${review.rating}</td>
                                <td>${review.markTime}</td>
                                <td>
                                    <button onclick="showEditForm(${review.rid})">修改</button>
                                    <button onclick="showDeleteForm(${review.rid})">删除</button>
                                </td>
                            `;
                        tableBody.appendChild(row);
                    });
                } else {
                    alert(data.error);
                }
            })
            .catch(error => {
                alert('查询评论信息失败：' + error.message);
            });
    }

    // 提交添加评论表单时发送请求
    document.getElementById("addReviewForm").addEventListener("submit", function(event) {
        event.preventDefault();

        var uid = document.getElementById("addUid").value;
        var mmid = document.getElementById("addMmid").value;
        var content = document.getElementById("addContent").value;
        var rating = document.getElementById("addRating").value;
        var markTime = document.getElementById("addMarktime").value;

        var review = {
            uid: uid,
            mmid: mmid,
            content: content,
            rating: rating,
            markTime: markTime
        };

        fetch('/review/addReview', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(review)
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    addReviewModal.style.display = "none";
                    // 刷新页面
                    location.reload();
                } else {
                    alert(data.message);
                }
            })
            .catch(error => {
                alert('添加评论失败：' + error.message);
            });
    });


    // 显示修改评论表单
    function showEditForm(rid) {
        editReviewModal.style.display = "block";
        fetch(`/review/infoReview?rid=${rid}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    var review = data.reviews;
                    document.getElementById("editRid").value = review.rid;
                    document.getElementById("editUid").value = review.uid;
                    document.getElementById("editMmid").value = review.mmid;
                    document.getElementById("editContent").value = review.content;
                    document.getElementById("editRating").value = review.rating;
                    document.getElementById("editMarktime").value = review.markTime;
                } else {
                    alert(data.error);
                }
            })
            .catch(error => {
                alert('查询评论信息失败：' + error.message);
            });
    }

    // 提交修改评论表单时发送请求
    document.getElementById("editReviewForm").addEventListener("submit", function(event) {
        event.preventDefault();

        var rid = document.getElementById("editRid").value;
        var uid = document.getElementById("editUid").value;
        var mmid = document.getElementById("editMmid").value;
        var content = document.getElementById("editContent").value;
        var rating = document.getElementById("editRating").value;
        var markTime = document.getElementById("editMarktime").value;

        var review = {
            rid: rid,
            uid: uid,
            mmid: mmid,
            content: content,
            rating: rating,
            markTime: markTime
        };

        fetch('/review/updateReview', {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(review)
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    editReviewModal.style.display = "none";
                    // 刷新页面
                    location.reload();
                } else {
                    alert(data.message);
                }
            })
            .catch(error => {
                alert('修改评论信息失败：' + error.message);
            });
    });

    // 显示删除评论表单
    function showDeleteForm(rid) {
        deleteReviewModal.style.display = "block";
        document.getElementById("deleteRid").value = rid;
    }

    // 确认删除评论
    function confirmDeleteReview() {
        var rid = document.getElementById("deleteRid").value;
        fetch(`/review/deleteReview/${rid}`, {
            method: 'DELETE'
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    deleteReviewModal.style.display = "none";
                    // 刷新页面
                    location.reload();
                } else {
                    alert(data.message);
                }
            })
            .catch(error => {
                alert('请求出错，请稍后重试');
            });
    }

    // 取消删除评论
    function cancelDeleteReview() {
        deleteReviewModal.style.display = "none";
    }
</script>
</body>
</html>